<template>
  <div class="main">
    <div class="titlt">
      客户画像

      <el-button class="back" type="info" @click="$router.back()">返回</el-button>
    </div>

    <!-- <div id="main" style="width: 400px; height: 300px"></div> -->
    <!-- 标签主体 -->
    <div class="mainBox mainBox1">
      <div class="smallLine"></div>
      <div class="mainTitle">个人信息</div>
      <!-- 具体信息 -->
      <div v-loading="loading">
        <!-- 单个信息 -->
        <div class="userInfo">
          <div class="userInfoTitle">基本信息</div>
          <div
            v-for="item in userInfoList.basicInfoList"
            v-show="item"
            class="labelStyle blue"
          >
            {{ item }}
          </div>
          <!-- <div class="labelStyle blue">123456789</div> -->
        </div>
        <!-- 单个信息 -->
        <div class="userInfo">
          <div class="userInfoTitle">交易风险</div>
          <!--          <div-->
          <!--            class="labelStyle orange"-->
          <!--            v-for="item in userInfoList.customerRiskList"-->
          <!--            v-show="item"-->
          <!--          >-->
          <!--            {{ item }}-->
          <!--          </div>-->
          <div
            v-for="item in ['正常类客户']"
            v-show="item"
            class="labelStyle orange"
          >
            {{ item }}
          </div>
        </div>
        <!-- 单个信息 -->
        <div class="userInfo">
          <div class="userInfoTitle">社会关系</div>
          <!--          <div-->
          <!--            class="labelStyle green"-->
          <!--            v-for="item in userInfoList.socialRelationList"-->
          <!--            v-show="item"-->
          <!--          >-->
          <!--            {{ item }}-->
          <!--          </div>-->
          <div
            v-for="item in ['投保人','关联一个客户']"
            v-show="item"
            class="labelStyle green"
          >
            {{ item }}
          </div>
        </div>
        <!-- 单个信息 -->
        <div class="userInfo">
          <div class="userInfoTitle">客户意向</div>
          <!--          <div-->
          <!--            class="labelStyle red"-->
          <!--            v-for="item in userInfoList.customerWantList"-->
          <!--            v-show="item"-->
          <!--          >-->
          <!--            {{ item }}-->
          <!--          </div>-->
          <div
            v-for="item in ['活动参与度:高','活跃度:高','认可度:高']"
            v-show="item"
            class="labelStyle red"
          >
            {{ item }}
          </div>
        </div>
        <!-- 单个信息 -->
        <div class="userInfo">
          <div class="userInfoTitle">购买能力</div>
          <!--          <div-->
          <!--            class="labelStyle purple"-->
          <!--            v-for="item in userInfoList.customerBuyList"-->
          <!--            v-show="item"-->
          <!--          >-->
          <!--            {{ item }}-->
          <!--          </div>-->
          <div
            v-for="item in ['家庭年收入:20-50万','累计保费: 6万']"
            v-show="item"
            class="labelStyle purple"
          >
            {{ item }}
          </div>
        </div>
        <!-- 单个信息 -->
        <div class="userInfo">
          <div class="userInfoTitle">客户偏好</div>
          <!--          <div-->
          <!--            class="labelStyle blue"-->
          <!--            v-for="item in userInfoList.customerLikeList"-->
          <!--            v-show="item"-->
          <!--          >-->
          <!--            {{ item }}-->
          <!--          </div>-->
          <div
            v-for="item in ['活动偏好:抽奖','险种偏好:重疾险']"
            v-show="item"
            class="labelStyle blue"
          >
            {{ item }}
          </div>
        </div>
        <!-- 单个信息 -->
        <div class="userInfo">
          <div class="userInfoTitle">流失风险</div>
          <!--          <div-->
          <!--            class="labelStyle red"-->
          <!--            v-for="item in userInfoList.LossRiskList"-->
          <!--            v-show="item"-->
          <!--          >-->
          <!--            {{ item }}-->
          <!--          </div>-->
          <div
            v-for="item in ['是否有效客户:是']"
            v-show="item"
            class="labelStyle red"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div id="main"></div>
    </div>
    <!-- 客户趋势图 -->
    <div class="mainBox mainBox2">
      <div class="smallLine"></div>
      <div class="mainTitle timeStyle">
        <div>客户趋势</div>
        <!-- 头部右侧标题 -->
        <div class="rightSider">
          <el-select
            v-model="dataVal"
            class="selector"
            placeholder="请选择"
            @change="changeVal"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- 按天 -->

          <el-date-picker
            v-if="dayStatus"
            key="tian"
            v-model="value1"
            :picker-options="pickerOptions"
            align="right"
            class="picker"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            unlink-panels
            value-format="yyyy-MM-dd"
            @change="changeDates"
          >
          </el-date-picker>
          <!-- 自然周 -->
          <el-date-picker
            v-if="weekStatus"
            key="zhou"
            v-model="value2"
            :picker-options="pickerOptions"
            class="picker"
            format="yyyy 第 WW 周"
            placeholder="选择周"
            type="week"
            value-format="yyyy-MM-dd"
            @change="changeDates"
          >
          </el-date-picker>
          <!-- 自然月 -->
          <el-date-picker
            v-if="monthStatus"
            v-model="value3"
            :picker-options="pickerOptions"
            class="picker"
            end-placeholder="结束月份"
            placeholder="选择月"
            range-separator="至"
            start-placeholder="开始月份"
            type="monthrange"
            value-format="yyyy-MM"
            @change="changeDates"
          >
          </el-date-picker>
          <!-- 自然年 -->
          <el-date-picker
            v-if="yearStatus"
            key="nian"
            v-model="value4"
            :picker-options="pickerOptions"
            class="picker"
            placeholder="选择年"
            size="mini"
            style="width: 30%"
            type="year"
            value-format="yyyy"
            @change="changeDates"
          >
          </el-date-picker>
          <span v-if="yearStatus" class="range-word"> 至 </span>
          <el-date-picker
            v-if="yearStatus"
            key="niana"
            v-model="endDate"
            :picker-options="pickerOptions"
            class="picker pickerYear"
            format="yyyy"
            placeholder="选择结束年"
            size="mini"
            style="width: 30%"
            type="year"
            value-format="yyyy"
            @change="changeDates"
          >
          </el-date-picker>
        </div>
      </div>
      <!-- 整体统计区域 -->
      <div class="chart">
        <!--        <div id="one" v-loading="loading1"></div>-->
        <div id="one">
          <div id="oneChart" style="height: 304px"></div>
          <el-row style="line-height: 18px;padding:20px 6px;font-size: 14px">
            <el-col :span="16" style="margin-bottom: 6px">规模保费: 20000元</el-col>
            <el-col :span="8" style="margin-bottom: 6px">成交保单: 2件</el-col>
            <el-col :span="8" style="margin-bottom: 6px">平均客单价: 10000元</el-col>
            <el-col :span="8" style="margin-bottom: 6px">最高客单价: 12000元</el-col>
            <el-col :span="8" style="margin-bottom: 6px">最低客单价: 8000元</el-col>
          </el-row>
        </div>
        <div id="chartTwo" v-loading="loading1"></div>
      </div>
      <!-- 整体数据 -->
      <div class="allData">
        <div class="leftBox dataBox">
          <div class="dataTitle">消费趋势数据</div>
          <div class="dataInfo">
            <div class="big">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">成交保单</div>
              </div>
              <div class="total">
                {{ tradeInfoList.policyNum || 0 }} <span>件</span>
              </div>
            </div>
            <div class="big">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">规模保费</div>
              </div>
              <div class="total">
                {{ tradeInfoList.scalePrem || 0 }} <span>元</span>
              </div>
            </div>
            <div class="big">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">浏览频次</div>
              </div>
              <div class="total">
                {{ tradeInfoList.visitTimes }} <span>次</span>
              </div>
            </div>
            <div class="big">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">平均客单价</div>
              </div>
              <div class="total">
                {{ tradeInfoList.avgPolicyPrem }} <span>元</span>
              </div>
            </div>
            <div class="big">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">最高客单价</div>
              </div>
              <div class="total">
                {{ tradeInfoList.maxPolicyPrem }} <span>元</span>
              </div>
            </div>
            <div class="big">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">最低客单价</div>
              </div>
              <div class="total">
                {{ tradeInfoList.minPolicyPrem }} <span>元</span>
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox dataBox">
          <div class="dataTitle">险种趋势数据</div>
          <div class="dataInfo">
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">年金险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].annuitypreTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">养老险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].lifepreTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">驾乘险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].busTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">学平险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].learnTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">重疾险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].criticalpreTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">意健险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].accidentpreTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">健康险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].healthTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
            <div class="big small">
              <div class="one">
                <div class="circle"></div>
                <div class="concret">医疗险</div>
              </div>
              <div class="total">
                {{
                  (riskInfoList.tradeRiskResDTOList &&
                    riskInfoList.tradeRiskResDTOList[0].medicarepreTrade) ||
                  0
                }}
                <span>件</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { queryPortraitBasic } from '@/api/customerInherit/portrait'

export default {
  name: 'DataviewIndex',
  props: {},
  components: {},
  data() {
    return {
      loading: false,
      loading1: false,
      dataVal: '1',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      endDate: '',
      dayStatus: true,
      weekStatus: false,
      monthStatus: false,
      yearStatus: false,
      options: [
        {
          value: '1',
          label: '按天'
        },
        {
          value: '2',
          label: '自然周'
        },
        {
          value: '3',
          label: '自然月'
        },
        {
          value: '4',
          label: '自然年'
        }
      ],
      userInfoList: {}, //个人信息
      tradeInfoList: {}, //消费趋势
      riskInfoList: {}, //险种趋势
      chartOneX: [],
      chartOneDataOfPolicy: [],
      chartOneDataOfVisit: [],
      chartTwoX: [],
      chartTwoDataOfPolicy: [],
      chartTwoDataOfVisit: [],
      wordData: [
        {
          name: '直播',
          value: 163
        }
      ]
    }
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      this.$nextTick(() => {
        this.test()
        this.getChartOne()
        this.getChartTwo()
      })
    },
    test() {
      var mycharts = echarts.init(document.getElementById('main'))
      //用来存储数据
      var jsonlist = []
      jsonlist = this.wordData
      // 人像的base64编码
      let image1 =
        ''
      var maskResource = new Image()
      maskResource.src = image1
      var option = {
        //设置标题，居中显示
        //   title: {
        //     text: "词云示例",
        //     left: "center",
        //   },
        //数据可以点击
        tooltip: {},
        series: [
          {
            maskImage: maskResource,
            //词的类型
            type: 'wordCloud',
            //设置字符大小范围
            sizeRange: [6, 26],
            rotationRange: [-45, 90],
            gridSize: -200, // 单词之间的间隔大小
            // shape: "cardioid", // 词云的形状，可选值有
            // cardioid心形,diamond菱形,square正方形,triangle-forward指向右边的三角形,triangle-upright正三角形
            // triangle三角形，pentagon五角形，star五角星形，

            //不要忘记调用数据
            data: jsonlist,
            textStyle: {
              // normal: {
              //生成随机的字体颜色
              color: function() {
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') +
                  ')'
                )
              }
              // },
            }
          }
        ]
      }
      //加载图像，将数据放在图像中
      maskResource.onload = function() {
        mycharts.setOption(option)
      }
    },
    // 下拉框change事件
    changeVal() {
      if (this.dataVal === '1') {
        this.dayStatus = true
        this.weekStatus = false
        this.monthStatus = false
        this.yearStatus = false
      } else if (this.dataVal === '2') {
        this.dayStatus = false
        this.weekStatus = true
        this.monthStatus = false
        this.yearStatus = false
      } else if (this.dataVal === '3') {
        this.dayStatus = false
        this.weekStatus = false
        this.monthStatus = true
        this.yearStatus = false
      } else if (this.dataVal === '4') {
        this.dayStatus = false
        this.weekStatus = false
        this.monthStatus = false
        this.yearStatus = true
      }
    },
    // 日期框change事件
    changeDates() {
      let obj = { sid: this.$route.query.sid }
      if (this.dataVal === '1') {
        obj.dateType = 'DAY'
        obj.startDate = this.value1[0]
        obj.endDate = this.value1[1]
      } else if (this.dataVal === '2') {
        console.log(this.value2)
        obj.dateType = 'DAY'
        obj.startDate = this.value2
        obj.endDate = this.timeChange(this.value2, 'DAY')
      } else if (this.dataVal === '3') {
        obj.dateType = 'MONTH'
        obj.startDate = this.value3[0]
        obj.endDate = this.value3[1]
        // obj.endDate =
        //   new Date(this.value3).getFullYear() +
        //   "-" +
        //   (new Date(this.value3).getMonth() * 1 + 2 >= 10
        //     ? new Date(this.value3).getMonth() * 1 + 2
        //     : "0" + (new Date(this.value3).getMonth() * 1 + 2));
      } else if (this.dataVal === '4') {
        obj.dateType = 'YEAR'
        obj.startDate = this.value4
        obj.endDate = this.endDate
      }
      console.log(obj)
      if (this.dataVal === '4') {
        if (this.value4 && this.endDate) {
          this.queryPortraitTrade(obj)
          this.queryPortraitRisk(obj)
        }
      } else {
        this.queryPortraitTrade(obj)
        this.queryPortraitRisk(obj)
      }
    },
    // 柱状图
    getChartOne() {
      var myChart = echarts.init(document.getElementById('oneChart'))
      var option

      option = {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['incident', '成交', '浏览'],
          source: [
            { incident: '2024-04-24', 成交: 0, 浏览: 2 },
            { incident: '2024-04-25', 成交: 0, 浏览: 1 },
            { incident: '2024-04-26', 成交: 1, 浏览: 5 },
            { incident: '2024-04-27', 成交: 0, 浏览: 1 },
            { incident: '2024-04-28', 成交: 1, 浏览: 4 },
            { incident: '2024-04-29', 成交: 0, 浏览: 2 },
            { incident: '2024-04-30', 成交: 0, 浏览: 1 }
          ]
        },
        xAxis: { type: 'category',  axisLabel: {
            show: true,
            interval: 0
          } },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }]
      }
      option && myChart.setOption(option)
    },
    // 雷达图
    getChartTwo() {
      var chartDom = document.getElementById('chartTwo')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '险种趋势',
          textStyle: {
            color: '#2A2A2A',
            fontSize: 16,
            fontWeight: '700',
            fontFamily: 'PangMenZhengDao'
          }
        },

        color: ['#FB582F', '#FFAD3A'],
        legend: {
          data: ['成交', '浏览'],
          top: 20,
          right: 20
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '年金险', max: 10 },
            { name: '养老险', max: 10 },
            { name: '驾乘险', max: 10 },
            { name: '学平险', max: 10 },
            { name: '重疾险', max: 10 },
            { name: '意健险', max: 10 },
            { name: '健康险', max: 10 },
            { name: '医疗险', max: 10 }
            // [10, 1, 1, 1, 1, 1, 1]
          ],
          name: {
            // 修饰雷达图文字的颜色
            textStyle: {
              color: '#505050'
            }
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: 'rgba(255,0,0,0)' // 图表背景的颜色
            }
          },
          splitLine: {
            //配置雷达图的每一圈的网格线颜色
            lineStyle: {
              color: '#ccc'
            }
          },
          // 坐标轴的线修改为白色半透明
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0)'
            }
          }
        },

        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: this.chartTwoDataOfPolicy,
                name: '成交',
                areaStyle: {
                  color: 'rgba(255,173,58,0.05)'
                }
              },
              {
                value: this.chartTwoDataOfVisit,
                name: '浏览',
                areaStyle: {
                  color: 'rgba(252,88,48,0.05)'
                }
              }
            ]
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 获取基本信息
    async queryPortraitBasic() {
      this.loading = true
      this.wordData = []
      const res = await queryPortraitBasic({ sid: this.$route.query.sid })
      if (res.code === 200) {
        this.userInfoList = res.data
        for (let key in res.data) {
          if (res.data[key]) {
            res.data[key].forEach((item) => {
              this.wordData.push({
                name: item,
                value: Math.random() * 100
              })
            })
          }
        }
        this.loading = false
      }
      this.test()
    },
    // 获取消费趋势
    async queryPortraitTrade(obj) {
      // this.loading1 = true;
      // this.chartOneX = [];
      // this.chartOneDataOfPolicy = [];
      // this.chartOneDataOfVisit = [];
      // const res = await queryPortraitTrade(obj);
      // if (res.code === 200) {
      //   this.tradeInfoList = res.data;
      //   res.data.tradeResDTOList.forEach((item) => {
      //     this.chartOneX.push(item.theDate);
      //     this.chartOneDataOfPolicy.push(item.datePolicyNum);
      //     this.chartOneDataOfVisit.push(item.dateVisitNum);
      //   });
      // }
      // this.loading1 = false;
      // // console.log(
      // //   this.chartOneX,this.chartOneDataOfPolicy,this.chartOneDataOfVisit
      // // );
      // this.getChartOne();
      const getData = {
        'visitTimes': 13,
        'scalePrem': 20000,
        'policyNum': 2,
        'avgPolicyPrem': 10000,
        'maxPolicyPrem': 12000,
        'minPolicyPrem': 8000,
        'tradeResDTOList': []
      }
      this.tradeInfoList = getData
      getData.tradeResDTOList.forEach((item) => {
        this.chartOneX.push(item.theDate)
        this.chartOneDataOfPolicy.push(item.datePolicyNum)
        this.chartOneDataOfVisit.push(item.dateVisitNum)
      })
      window.setTimeout(() => {
        this.getChartOne()
      }, 100)
    },
    // 获取险种趋势
    async queryPortraitRisk(obj) {
      // this.loading1 = true;
      // const res = await queryPortraitRisk(obj);
      // if (res.code === 200) {
      //   this.riskInfoList = res.data;
      //   this.chartTwoDataOfPolicy = res.data.tradeList;
      //   this.chartTwoDataOfVisit = res.data.visitList;
      // }
      // this.loading1 = false;
      const getDate = {
        'consumerLike': null,
        'tradeRiskResDTOList': [
          {
            'criticalpreTrade': '1',
            'lifepreTrade': '0',
            'accidentpreTrade': '0',
            'annuitypreTrade': '1',
            'medicarepreTrade': '',
            'learnTrade': null,
            'busTrade': null,
            'healthTrade': null
          }
        ],
        'tradeList': [
          '1',
          '0',
          '0',
          '0',
          '1',
          '0',
          '0',
          '0'
        ],
        'visitList': [
          '6',
          '0',
          '0',
          '0',
          '4',
          '0',
          '0',
          '3'
        ],
        'visitRiskResDTOList': [
          {
            'criticalpreVisit': '0',
            'lifepreflagVisit': '0',
            'accidentpreflagVisit': '0',
            'annuitypreflagVisit': '0',
            'medicarepreflagVisit': '0',
            'learnVisit': null,
            'busVisit': null,
            'healthVisit': null
          }
        ]
      }
      this.riskInfoList = getDate
      this.chartTwoDataOfPolicy = getDate.tradeList
      this.chartTwoDataOfVisit = getDate.visitList
      window.setTimeout(() => {
        this.getChartTwo()
      }, 100)
      // this.getChartTwo();
    },
    // 时间处理
    timeChange(time, mark) {
      let time1 = new Date(time).getTime()
      if (mark === 'DAY') {
        var newTime = time1 + 6 * 24 * 60 * 60 * 1000
      } else if (mark === 'start') {
        var newTime = time1 - 6 * 24 * 60 * 60 * 1000
      } else if (mark === 'start1') {
        var newTime = time1
      }

      let year = new Date(newTime).getFullYear()
      let month =
        new Date(newTime).getMonth() + 1 >= 10
          ? new Date(newTime).getMonth() + 1
          : '0' + (new Date(newTime).getMonth() + 1)
      let day =
        new Date(newTime).getDate() >= 10
          ? new Date(newTime).getDate()
          : '0' + new Date(newTime).getDate()
      return `${year}-${month}-${day}`
    }
  },
  created() {
    this.value1 = [
      this.timeChange(new Date(), 'start'),
      this.timeChange(new Date(), 'start1')
    ]
    Promise.all([this.queryPortraitBasic(), this.changeDates()])

    // this.queryPortraitTrade();
    // this.queryPortraitRisk();
  },
  mounted() {
    // this.init();
    // this.getChhartOne()
  }
}
</script>

<style lang="scss" scoped>
.main {
  // top: 0;
  // position: relative;
  // min-width: 100%;
  // min-height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // overflow:auto !important;
  padding-right: 20px;
  // background-color: rgb(221, 189, 189);
}

//   #main {
//     // background-color: rgb(128, 94, 94);
//   }

.titlt {
  position: absolute;
  top: 0;
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-radius: 8px;
  background-color: #fff;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2a2a2a;
  line-height: 60px;
  padding-left: 20px;

  .back {
    float: right;
    margin-top: 18px;
    margin-right: 22px;
    //width: 72px;
    //height: 32px;
    //background: #e7e7e7;
    border-radius: 3px;
    border: none !important;
    //color: #2a2a2a !important;
  }
}

.mainBox1 {
  top: 60px;
}

.mainBox2 {
  top: 520px;
}

.mainBox {
  position: absolute;

  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
  padding: 16px 20px;

  #main {
    position: absolute;
    top: 10px;
    right: 100px;
    width: 150px;
    height: 350px;
    // background-color: #25ce2c;
    background-image: url("../../../assets/image/bg3.png");
    background-repeat: no-repeat;
  }

  .mainTitle {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .smallLine {
    width: 4px;
    height: 20px;
    background: #082aff;
    position: absolute;
    left: 0;
  }

  .userInfo {
    margin-top: 26px;
    display: flex;
    align-items: center;

    .userInfoTitle {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #505050;
      margin-right: 20px;
    }

    .labelStyle {
      min-width: 60px;
      height: 30px;
      background: #e9effc;
      border-radius: 2px;
      padding-left: 13px;
      padding-right: 13px;
      text-align: center;
      margin-right: 10px;
      line-height: 30px;
    }
  }
}

.mainBox .timeStyle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // .rightSider {
  //   // margin-top: 14px;
  //   // margin-left: 1150px;
  // }
}

.chart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 23px;

  #one {
    // min-width: 570px;
    // padding-top: 20px;
    // padding-left: 20px;
    padding: 10px;
    flex: 1 0 50%;
    height: 384px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    margin-right: 20px;
    box-sizing: border-box;
  }

  #chartTwo {
    // min-width: 570px;
    // padding-left: 20px;
    padding: 10px;
    box-sizing: border-box;
    padding-top: 20px;
    flex: 1 0 50%;
    height: 384px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    //
  }
}

.allData {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 23px;

  .dataBox {
    flex: 1;
    min-width: 570px;
    height: 242px;
    background: #f7f7f7;
    border-radius: 9px;
    padding-top: 14px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .dataTitle {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #393b44;
  }

  .dataInfo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;

    .small {
      width: 23% !important;
    }

    .big {
      width: 30%;
      height: 77px;
      background: #ffffff;
      border-radius: 6px;
      padding-top: 16px;
      padding-left: 13px;
      margin-bottom: 14px;

      .one {
        display: flex;
        align-items: center;

        .circle {
          width: 6px;
          height: 6px;
          background: #082aff;
          border-radius: 50%;
          margin-right: 6px;
        }

        .concret {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }

      .total {
        margin-top: 5px;
        margin-left: 6px;
        font-size: 24px;
        font-family: Gotham-Medium, Gotham;
        font-weight: 500;
        color: #505050;

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #505050;
        }
      }
    }
  }

  .leftBox {
    margin-right: 20px;
  }

  // .rightBox {
  // }
}

::v-deep.el-select {
  margin-right: 12px;
}

.blue {
  color: #3e85f6;
  background: #e9effc !important;
}

.orange {
  background: #fff3e7 !important;
  color: #e38424;
}

.red {
  background: #ffedec !important;
  color: #ff5252;
}

.green {
  background: #e8f8e8 !important;
  color: #25ce2c;
}

.purple {
  background: #f1ecff !important;
  color: #977aee;
}
</style>
